<template>
    <view class="container">
        <view class="nft-state">
            <u-icon
                name="https://img.ionepin.com/955324601e1d8aafd627d52727bb7d9aa9ab47eb.png"
                size="42rpx"
            ></u-icon>
            <view class="nft-state-text">等待支付</view>
        </view>
        <u-count-down
            :time="countDown()"
            format="HH:mm:ss"
            autoStart
            @change="onChange"
        >
            <view class="time">
                <text class="time-item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                <text class="time-item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                <text class="time-item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
            </view>
        </u-count-down>
        <view class="nft-info">
            <u-image
                :src="nft.img"
                width="250rpx"
                height="250rpx"
            ></u-image>
            <u-text
                :text="nft.name"
                size="28rpx"
                color="#000000"
                align="center"
                margin="30rpx 0 0 0"
                :lines="1"
            ></u-text>
        </view>
        <view class="label-cell">
            <u-cell-group
               :border="false"
            >
                <u-cell
                    title="支付方式"
                    :border="false"
                    rightIconStyle="font-size: 34rpx;color: #000000"
                    titleStyle="font-size: 26rpx;line-height: 1.5"
                >
                    <view class="pay-info" slot="value">
                        <u-icon
                            name="https://img.ionepin.com/60aa2043c6c56a6d92d85a4653011b9b1102e983.png"
                            size="42rpx"
                        ></u-icon>
                        <view class="pay-name">余额支付</view>
                    </view>
                </u-cell>
            </u-cell-group>
            <view class="order-price">
                <view class="order-price-label">总价</view>
                <u-text
                    :text="exchangeOrder.money"
                    size="28rpx"
                    bold
                    align="right"
                    prefixIcon="rmb"
                    iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 6rpx;"
                ></u-text>
            </view>
        </view>
        <view class="bottom">
            <u-button
                class="btn-confirm"
                text="确认支付"
                customStyle="color: #FFFFFF;font-size: 30rpx;"
                @click="payment"
            ></u-button>
        </view>
        <u-popup
            :show="popupShow"
            mode="center"
            :customStyle="{
                width: '660rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                @confirm="onsubmit"
                :extData="extData"
                :p_type="p_type"
            ></popup-context>
        </u-popup>
    </view>
</template>

<script>
    import { getExchangeOrderInfo } from "@/config/api"
    import { userBuyNft  } from "@/config/api-java"
    import PopupContext from "@/components/PopupContext"
    export default {
        name: "index",
        components: {
            PopupContext
        },
        data() {
            return {
                timeData: {},
                exchangeOrder: {},
                nft: {},
                extData: {},
                popupShow: false,
                p_type: "security"
            }
        },
        async onLoad(option) {
            const res = await getExchangeOrderInfo(option.id)
            this.exchangeOrder = res.exchangeOrder
            this.nft = res.nft
        },
        computed: {
        },
        onShow() {
            this.popupShow = false
        },
        methods: {
            onChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            },
            countDown() {
               return 300000
            },
            async onsubmit(info) {
                var data = {
                    code: info.code,
                    money: this.exchangeOrder.money,
                    orderId: this.exchangeOrder.id,
                    safePass: info.password
                }
                const res = await userBuyNft(data)
                uni.$u.route("pages_v2/collectInfo/complete", {money: this.exchangeOrder.money})
            },
            payment() {
                this.popupShow = true
                this.p_type = this.$store.getters.safePass? "security":"safePass"
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .nft-state {
            display: flex;
            align-content: center;
            justify-content: center;
            padding-top: 55rpx;
            .nft-state-text {
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-left: 14rpx;
            }
        }
        .time {
            display: flex;
            font-size: 44rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: 600;
            line-height: 1.2;
            color: #000000;
            text-align: center;
            justify-content: center;
            margin-top: 30rpx;
        }
        .nft-info {
            margin-top: 70rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 180rpx;
        }
        .label-cell {
            //padding-left: 14rpx;
            margin-top: 70rpx;
            .pay-info {
                display: flex;
                .pay-name {
                    margin-left: 14rpx;
                    font-size: 28rpx;
                    font-family: PingFang-SC-Regular, PingFang-SC;
                    font-weight: 400;
                    color: #000000;
                }
            }
            ::v-deep .u-cell__body {
                padding: 40rpx 40rpx;
            }
        }
        .order-price {
            display: flex;
            justify-content: space-between;
            padding-right: 54rpx;
            .order-price-label {
                padding-left: 40rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
            }
        }
        .bottom {
            position: fixed;
            width: 100%;
            box-sizing: border-box;
            bottom: 0;
            padding: 0 20rpx 30rpx 20rpx;
            .btn-confirm {
                height: 90rpx;
                background: #000000;
            }
        }
    }
</style>
